<template>
  <v-chart
    :options="option"
    :autoresize="true"
    theme="chartsTheme"
  />
</template>
<script>
import {mapGetters, mapActions, mapState } from 'vuex';

export default {
  data() {
    return {
      axisDataList: [],
      servicePersonsData: [],
      serviceCarsData: [],
      option: {
        color: ["#19be6b", "#ff9900"],
        title: {
          text: "站点总服务车辆数及总服务人次变化趋势"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["车辆数", "服务人次"]
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          left: '2%',
          right: '6%'
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.axisDataList,
        },
        yAxis: [{
          type: "value",
          // name: '人次',
          min: 1500,
          axisLabel: {
            formatter: "{value}"
          }
        }],
        series: [
          {
            name: "车辆数",
            type: "line",
            data: this.xianServiceCarsCount,
            label: {
              show: false
            },
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" }
            //   ]
            // },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "服务人次",
            type: "line",
            data: this.xianServicePersonsCount,
            label: {
              show: false
            },
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" }
            //   ]
            // },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      }
    }
  },
  watch: {
    xianServiceCarsCount: {
      deep: true,
      handler (value) {
        // console.log('进店人次新的值：', value)
        this.option.series[0].data = value
      }
    },
    xianServicePersonsCount: {
      deep: true,
      handler (value) {
        // console.log('服务人次新的值：', value)
        this.option.series[1].data = value
      }
    },
    axisDataList: {
      deep: true,
      handler (value) {
        this.option.xAxis.data = value
      }
    }
  },
  computed: {
    ...mapState(['xianServiceCarsCount', 'xianServicePersonsCount']),
    ...mapGetters([
      'todayXAxisDataList',
      'weekXAxisDataList',
      'monthXAxisDataList',
      'dayWeekMonthStartEndTime'
    ])
  },
  created () {
    this.axisDataList = this.monthXAxisDataList

  },
  mounted() {
    let serviceCarsParams = {
      group: 'day',
      interval: "1",
      company_id: '49',
      category: "refuel",
      start_time: this.dayWeekMonthStartEndTime.monthStartTime,
      end_time: this.dayWeekMonthStartEndTime.todayEndTime
    }
    let servicePersonsParams = {
      group: 'day',
      interval: "1",
      company_id: '49',
      category: "checkout",
      start_time: this.dayWeekMonthStartEndTime.monthStartTime,
      end_time: this.dayWeekMonthStartEndTime.todayEndTime
    }
    this.getXianServiceCarsStatistic(serviceCarsParams)
    this.getXianServicePersonsStatistic(servicePersonsParams)
  },
  methods: {
    ...mapActions([
      'getXianServiceCarsStatistic',
      'getXianServicePersonsStatistic'
    ])
  }
}
</script>

<style lang="less">
</style>

